<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-05-15 11:28:44
 * @LastEditors: 卓晓松 729519678@qq.com
 * @LastEditTime: 2022-07-28 15:59:36
 * @FilePath: \ericzhang\Rashipier_Monitor\myapp\src\views\monitor_rasp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main_container">
    <!-- 树莓派悬浮窗
    A栋树莓派-1
     -->
    <RsiDetailContainer>
      <rsione />
    </RsiDetailContainer>

    <!-- A栋树莓派-2 -->
    <A_RsiDetailContainer_two>
      <rsitwo_A />
    </A_RsiDetailContainer_two>

    <!-- A栋树莓派-3 -->
    <A_RsiDetailContainer_three>
      <rsithree_A />
    </A_RsiDetailContainer_three>

    <!-- A栋树莓派-4 -->
    <A_RsiDetailContainer_four>
      <rsifour_A />
    </A_RsiDetailContainer_four>

    <!-- A栋树莓派-5 -->
    <A_RsiDetailContainer_five>
      <rsifive_A />
    </A_RsiDetailContainer_five>

    <!-- A栋树莓派-6 -->
    <A_RsiDetailContainer_six>
      <rsisix_A />
    </A_RsiDetailContainer_six>

    <!-- A栋树莓派-7 -->
    <A_RsiDetailContainer_seven>
      <rsiseven_A />
    </A_RsiDetailContainer_seven>

    <!-- A栋树莓派-8 -->
    <A_RsiDetailContainer_eight>
      <rsieight_A />
    </A_RsiDetailContainer_eight>

    <!-- A栋树莓派-9 -->
    <A_RsiDetailContainer_nine>
      <rsinine_A />
    </A_RsiDetailContainer_nine>

    <!-- A栋树莓派-10 -->
    <A_RsiDetailContainer_ten>
      <rsiten_A />
    </A_RsiDetailContainer_ten>

    <!-- B栋树莓派样式设计 -->
    <!-- B栋树莓派-1 -->
    <B_RsiDetailContainer_one>
      <rsione_B />
    </B_RsiDetailContainer_one>

    <!-- B栋树莓派-2 -->
    <B_RsiDetailContainer_two>
      <rsitwo_B />
    </B_RsiDetailContainer_two>

    <!-- B栋树莓派-3 -->
    <B_RsiDetailContainer_three>
      <rsithree_B />
    </B_RsiDetailContainer_three>

    <!-- B栋树莓派-4 -->
    <B_RsiDetailContainer_four>
      <rsifour_B />
    </B_RsiDetailContainer_four>

    <!-- B栋树莓派-5 -->
    <B_RsiDetailContainer_five>
      <rsifive_B />
    </B_RsiDetailContainer_five>

    <!-- B栋树莓派-6 -->
    <B_RsiDetailContainer_six>
      <rsisix_B />
    </B_RsiDetailContainer_six>

    <header>
      <span>树莓派在线监控平台</span>
    </header>
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <!-- 友达公司logo -->
        <p><img class="auo_log" src="../assets/img/auo_logo.png" /></p>

        <img src="../assets/img/left_line.png" />

        <!-- 进行容器组件的嵌入 -->
        <EqSum></EqSum>
        <EqOnline></EqOnline>
        <EqOffline></EqOffline>
        <img class="img_right" src="~@/assets/img/right_line.png" />

        <!-- 友达光电文字 -->
        <p>
          <span>友达光电<br />AU Optronics</span>
        </p>
      </section>
      <!-- 中间容器 -->
      <section class="itemCenter">
        <div class="item_area">
          <span>A栋</span>
        </div>
        <!-- A棟树莓派 -->
        <BuildingA></BuildingA>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <div class="item_area">
          <span>B栋</span>
        </div>
        <BuildingB></BuildingB>
      </section>
    </section>
  </div>
</template>


<script>
// 引入A栋和B栋树莓派视图
import BuildingA from "@/views/BuildingA.vue";
import BuildingB from '@/views/BuildingB.vue'

// 引入总体信息组件
import EqOffline from "@/components/overinfo/EqOffline.vue";
import EqOnline from "@/components/overinfo/EqOnline.vue";
import EqSum from "@/components/overinfo/EqSum.vue";

export default {
  components: {
    BuildingA,
    BuildingB,
    EqOffline,
    EqOnline,
    EqSum,
  },
  setup() {},
};
</script>

<style lang="less">
@import "~@/assets/css/index.css";

// 进行A栋树莓派样式设计
.item_information {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

p {
  text-align: center;
  height: 70px;
  .auo_log {
    margin-top: 20px;
    height: 50px;
  }

  span {
    font-size: 40px;
    margin-left: 0px;
  }
}
</style>